<template>
	<view class="container">
		<view class="box" v-for="(item,index) in videoList">
			<view class="title">{{index+1}}{{item.title}}</view>
			<view class="btn" @click="btnVideo(item)">查看</view>
		</view>
		<u-popup :show="show"  mode='center' round="15" :safeAreaInsetBottom='false' @close="show=false" :closeable="true" >
		            <view style="padding:20rpx">
		                <view style="text-align: center;font-weight: 700;padding-bottom: 20rpx;">{{videoInfo.title}}</view>
						<video :src="videoInfo.url" :show-fullscreen-btn="true" :show-center-play-btn="true"></video>
		            </view>
				</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				videoInfo:{},
				videoList:[
					{
						title:'消息通知',
						url:'https://oss.daccf.com/t19wrd02bdt1trqw4rfbi/视频/dd11c50f-ff7e-4767-90eb-7f6a2e0c5bf4.mp4',
						desc:''
					}
				]
			}
		},
		methods: {
			btnVideo(item){
				this.videoInfo=item
				this.show=true
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.container {
	padding: 20rpx;
}
.box {
	padding: 30rpx 20rpx;
	border-radius: 20rpx;
	background-color: #fff;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		font-family: Source Han Sans;
		font-size: 28rpx;
		font-weight: 700;
		// margin-bottom: 30rpx;
	}
	.name {
		font-family: Source Han Sans;
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #86909c;
	}
	.btn {
		height: 56rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		color: #fff;
		background-color: #165dff;
		
		font-family: Source Han Sans;
		font-size: 28rpx;
	}
}

</style>
